<template>
	<div>
		<my-header :title="'发票信息'" :hasTitle="true" :hasBack="true" :goBack="goBack"></my-header>
		<div>
			<div class="vue_app" style="position: absolute;width: 100%;text-align: left;">
				<!--头部-->
				<!--<header class="aui-bar aui-bar-nav aui-bar-light">
					<div class="go-back" @click.stop="goBack">
						<i></i>
						<i></i>
						<i></i>
					</div>
					<div class="aui-title">发票信息</div>
				</header>
				<div style="height: 3rem;"></div>-->
				<!--头部-->
				<div class="invoice_con">
					<p>发票类型</p>
					<div class="standard_con">
						<li :class="1 === invoiceType ? 'active' : ''" @click.stop="changeType(1)">纸质发票
							<i class="icon njfont nj-xuanzhong"></i>
						</li>
						<!--@click.stop="loading"-->
						<li class="disabled">电子发票
							<i class="icon njfont nj-xuanzhong"></i>
						</li>
						<li :class="3 === invoiceType ? 'active' : ''" @click.stop="changeType(3)">增值税发票
							<i class="icon njfont nj-xuanzhong"></i>
						</li>
					</div>
				</div>
				<div class="aui-content top_div">
					<ul class="aui-list aui-form-list aui-margin-b-15">
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label">发票抬头</div>
								<div class="aui-list-item-input">
									<label>
                                    <input :disabled="invoiceType === 3 ? true : false" class="aui-radio" type="radio" name="demo2" :checked="invoiceTitle === '个人'" @click.stop="chooseType('个人')"> 个人</label> &nbsp;&nbsp;
									<label>
                                    <input disabled class="aui-radio" type="radio" name="demo2" :checked="invoiceTitle === '单位'" @click.stop="chooseType('单位')"> 单位</label>
								</div>
							</div>
						</li>
						
						<li class="aui-list-item" v-show="invoiceType === 3">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label">公司名称
									<font class="required">*</font>
								</div>
								<div class="aui-list-item-input">
									<input type="text" placeholder="输入公司名称" v-model="companyName">
								</div>
							</div>
						</li>
						<li class="aui-list-item" v-show="invoiceType === 3">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label">纳税人识别号
									<font class="required">*</font>
								</div>
								<div class="aui-list-item-input">
									<input type="text" placeholder="输入纳税人识别号" v-model="taxpayerNo">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label">发票内容
									<font class="required">*</font>
								</div>
							</div>
						</li>
						<li class="aui-list-item" v-for="(item,index) in contentArr" :key="index">
							<div class="aui-list-item-inpu fp_select">
								<label>
                                <input  class="aui-checkbox" type="checkbox" :checked="activeIndex == index"  @click.stop="getContent($event,index,item)"> &nbsp;&nbsp;&nbsp;{{item}}</label> 
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div style="height:4rem;"></div>
			<div class="settle_accounts lijixiadan">
				<div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm" @click.stop="save">保存</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from '../../../utils/toast';
	import { mapGetters, mapMutations } from "vuex";
	import MyHeader from "../../header";
	import axios from 'axios';
	
	export default {
		props: {

		},
		data() {
			return {
				fpInfo:null,
				contentArr:[],
				invoiceType: 1, //1纸质，2电子，3增值税发票,
				invoiceTitle: "个人",
				companyName: "",
				taxpayerNo: "",
				personalName: "",
				activeIndex: -1,
				fpContent:null,
				fpObjOld:null
			}
		},
		computed: {
			...mapGetters('wxh', [
				'sessionId',
				'userInfo'
			]),
			...mapGetters('zx', [
				'getFpObj',"getFpInfo"
			]),
		},
		components: {
			"MyHeader": MyHeader
		},
		created(){
			this.checkFp();
			this.innitData();
		},
		methods: {
			...mapMutations('zx',[
				"setFpObj"
			]),
			innitData(){
				
				
				this.fpInfo = this.getFpInfo;
				let str = this.fpInfo.invoiceItemList;
				this.contentArr = this.newContent(str);
				this.checkFp();
			},
			//检验是否已选发票  选了则回显
			checkFp(){
				let fpObj = this.getFpObj;
				if(Object.keys(fpObj).length){
					this.fpObjOld = fpObj;
//					内容回显
					for(let i = 0; i < this.contentArr.length; i++){
						
						if(fpObj.content == this.contentArr[i]){
							this.activeIndex = i; 
						}
					}
					this.invoiceTitle = fpObj.invoiceTitle;
					if(fpObj.invoiceTitle == '个人'){
						this.invoiceType = 1;
					}
					
					if(fpObj.invoiceTitle == '单位'){
						this.invoiceType = 3;
						this.companyName = fpObj.companyName;
						this.taxpayerNo = fpObj.taxpayerNo;
					}
					console.log(fpObj,'获取已选的发票对象');
				}
			},
			newContent(str){
				if(str){
					var arr = [];
					arr = str.split('\n') || str.split('\r') || str.split('\r\n');
					return arr;
				}
			},
			getContent(e,index,item){
				
				if(this.activeIndex != index){
					this.activeIndex = index;
					this.fpContent = item;
				}else{
					this.activeIndex = -1;
				}
				
			},
			//返回上一个页面
			goBack() {
				window.history.back();
			},
			//改变发票抬头
			chooseType(type) {
				this.invoiceTitle = type;
				console.log(this.invoiceTitle);
			},
			//改变发票类型
			changeType(type) {
				this.invoiceType = type;
				if(type === 3) {
					this.invoiceTitle = "单位";
				}else if(type === 1){
					this.invoiceTitle = "个人";
				}
			},
			
			//功能开发中
			loading() {
				MessageBox('提示', '功能开发中');
			},
			save() {
				if(this.invoiceType === 1) {
					if(this.fpContent) {
						let obj = this.fpInfo.invoiceConfigList[0];
						console.log(obj,"个人发票”")
						obj.content = this.fpContent;
						obj.invoiceTitle = this.invoiceTitle;
						console.log(obj,'发票信息')
						this.setFpObj(obj)  //存入vuex
						window.history.back();
					} else {
					   Toast({
			                message: '发票格式错误',
			                duration: 1000,
			                type:'fail'
			            });
					}
				} else if(this.invoiceType === 3) {
					if(this.companyName && this.taxpayerNo) {
						//保存到vuex中
						console.log(this.fpInfo.invoiceConfigList[1],'增值税');	
						let obj = this.fpInfo.invoiceConfigList[1];
						obj.content = this.fpContent;
						obj.companyName = this.companyName;
						obj.invoiceTitle = this.invoiceTitle;
						obj.taxpayerNo = this.taxpayerNo;
					
//						console.log(obj,'发票信息')
						this.setFpObj(obj);   //存入vuex
						window.history.back();
					} else {
						Toast({
			                message: '发票格式错误',
			                duration: 1000,
			                type:'fail'
			            });
					}
				}

			},
		},

	}
</script>

<style>
.fp_select{
	padding-top: 0.5rem
}
</style>